<template>
	<view class="content" :style="{paddingTop:`${$safeh}px `}">
		<u-loading-page bg-color="#fff" :loading="loading">
		</u-loading-page>
		<view class="studentinfo u-p-20">
			<view class="flex-end">
				{{info.createAt}}
			</view>
			<view class="u-p-20">
				<view class="">
					<text>姓名：{{info.studentName}}</text>
					<text class="u-m-l-100">学号：{{info.studentCode}}</text>
				</view>
				<view class="u-m-tb-30 flex-a-c">
					<text class="u-font-34">当天课程</text>
					<view class="dayclass">
						<view class="u-m-l-100">
							<!-- <view class="grey">
								上午：语文 数学 英语
							</view> -->
							<view class="grey">
								{{info.courseDay}}
							</view>
						</view>
					</view>
				</view>
				<view class="flex-between">
					<view>
						<text>语言量</text>
						<text class="grey">(全部平均数)</text>
					</view>
					<text class="grey">{{info.languageAmount}}字</text>
				</view>
				<view class="flex-between u-m-tb-30">
					<view>
						<text>运动量</text>
						<text class="grey">(全部平均数)</text>
					</view>
					<text class="grey">{{info.motionAmount}}步</text>
				</view>
				<view class="">
					<text>饮食完成情况</text>
					<view class="grey u-m-tb-10">
						{{info.dietInfo}}
					</view>
				</view>
				<view class="flex-between u-m-tb-30">
					<text class="u-font-30">今日能力发展方面</text>
					<view class="">
						<text  class="grey u-m-l-10">
							{{info.abilityDevelop}}
						</text>
					</view>
				</view>
				<view class=" u-m-tb-30">
					<text class="u-font-30">您近期关注的学生能力发展指标</text>
					<view class="nlbox ">
						<scroll-view scroll-x="true" style="white-space: nowrap; width: 90%;">
							<view class="u-p-tb-20 flex-a-c" @click="addshow = true">
								<!-- <text class="tipitem u-font-24" v-for="i in nllist">{{i}}</text> -->
								{{nltext}}
								<u-icon color='#1972DF' name='arrow-right'></u-icon>	
							</view>
						</scroll-view>
						<!-- <view class=" u-m-lr-30" @click="addshow = true">
							<u-icon color='#1972DF' name='arrow-right'></u-icon>
						</view> -->
					</view>
				</view>

			</view>

		</view>
		<view class="advance">
			<image src="../../static/logo.png" mode="scaleToFill"></image>
		</view>

		<view class="flex-center u-m-tb-30">
			<image src="../../static/logo.png" style="width: 400rpx ; height: 200rpx; " mode=""></image>
		</view>
		<view class="flex-center u-m-tb-30">
			学生各方面能力考核结果
		</view>

		<view class="flex-center u-m-tb-30">
			<image src="../../static/logo.png" style="width: 400rpx ; height: 200rpx; " mode=""></image>
		</view>
		<view class="flex-center u-m-tb-30">
			学生各方面能力考核结果
		</view>

		<view class="flex-center u-m-tb-30">
			<image src="../../static/logo.png" style="width: 400rpx ; height: 200rpx; " mode=""></image>
		</view>
		<view class="flex-center u-m-tb-30">
			学生各方面能力考核结果
		</view>

		<view class="flex-between u-p-20">
			<text>查询今天学生在校情况</text>
			<image src="../../static/logo.png" style="width: 50rpx; height: 50rpx ;" mode=""></image>
		</view>
		<view class="advance">
			<image src="../../static/logo.png" mode="scaleToFill"></image>
		</view>
		<u-picker :show="addshow" @cancel='addshow=false' @confirm="areaconfirm" keyName='name' :columns="columns"></u-picker>
		<parentstabbar> </parentstabbar>
		
	</view>
</template>

<script>
	import parentstabbar from '../../components/parentstabbar.vue'
	export default {
		data() {
			return {
				addshow:false,
				nltext:'请选择能力',
				columns: [],
				info:{},
				loading:true,
			}
		},
		components: {
			parentstabbar
		},
		onLoad() {
			this.getabilty()
			this.init()
			setTimeout(()=>{
				this.loading = false
			},2000)
		},
		onShow() {
			const zxc = uni.getStorageSync('role')
			console.log(zxc,'zxcczx');
			if (zxc == 1) {
				uni.reLaunch({
					url: '/expert/index/index'
				})
			}
			if (zxc == 2) {
				uni.reLaunch({
					url: '/pagesT/index/index'
				})
			}
		},
		methods: {
			init(){
				this.$api.get('/assistant/xStudent/studySituation',{}).then(res=>{
					this.info = res.data
					this.nltext = res.data.followAbility[0].name
				})
			},
			areaconfirm(e){
				console.log(e);
				this.addshow = false
				this.nltext = e.value[0].name	
				this.$api.post('/assistant/xParentsFollow/setupAbility',{ids:[e.value[0].id]}).then(res=>{
					this.init()
				})
			},
			getabilty(){
				this.$api.get('/ability/xAbility/create',{}).then(res=>{
					this.columns = [res.data]
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.studentinfo {
		background-color: #fff;
		font-size: 26rpx;
	}

	.grey {
		color: #9E9E9E;
	}

	.nlbox {
		display: flex;
		align-items: center;

		.iconbox {
			border: 1rpx solid $main-color;
			padding: 5rpx;
		}

		.tipitem {
			border-radius: 50rpx;
			padding: 5rpx 20rpx;
			color: #CAC5C5;
			border: 1rpx solid #CAC5C5;

			&:nth-child(n+2) {
				margin-left: 30rpx;
			}
		}
	}

	.advance {
		image {
			width: 100%;
			height: 260rpx;
		}
	}
</style>